<template>
  <div class="contrast-box">
    <div class="contrast">
      <ul class="c-navTab">
        <li v-for="(item,index) in tabs" :class="{active:index == num}" @click="tab(index)" :key="index">
          {{item}}
        </li>
      </ul>
      <div class="c-main-box-box">
        <div class="c-main-box" v-bind:class="{translateX: num===1}">
          <div class="c-main">
            <div class="c-left">
              <div class="filter-box" style="margin:0">
                <div class="title-date">
                  <h3 class="title">
                    <em></em>园所内
                    <span>出勤率</span>曲线图</h3>
                  <ul>
                    <li class="btn1 on" @click="timeSlot(7, 111)">最近7天</li>
                    <li class="btn1" @click="timeSlot(30, 111)">最近30天</li>
                    <li>
                      <date-picker @getData="getData(arguments, 111)"></date-picker>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="echarts-box">
                <el-line :xData="dayWork.workDate" :data="dayWork.workData" :max="100" :grid="{
                    top: '5%',
                    left: '0%',
                    right: '0%',
                    bottom: '0%',
                    containLabel: true
                  }"
                  v-if="dayWork.summary !== '暂无总结'"
                >
                </el-line>
                <no-data v-else :item="'出勤率'" />
              </div>
              <el-summary :data="dayWork.summary"></el-summary>
            </div>
            <div class="c-right">
              <div class="filter-box">
                <div class="title-date">
                  <h3 class="title">
                    <em></em>园所内
                    <span>出勤情况</span>纵向对比</h3>
                  <ul>
                    <li class="btn1 on" @click="timeSlot(90, 112)">最近3个月</li>
                  </ul>
                </div>
                <div>
                </div>
              </div>
              <div class="table-main-one">
                <div class="table" v-if="this.monthWork.length">
                  <table>
                    <thead>
                      <tr>
                        <th>对比月份</th>
                        <th>月出勤率</th>
                        <th>月请假人次</th>
                        <th>与上月相比</th>
                        <th>月缺勤人次</th>
                        <th>与上月相比</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="item in monthWork" :key="item.id">
                        <td>{{toolTime(item)}}</td>
                        <td>{{item.minAttendPrc}}%--{{item.maxAttendPrc}}%</td>
                        <td>{{item.leaveCount}}人次</td>
                        <td>{{totalLeaveDiffCount(item)}}</td>
                        <td>{{item.absentCount}}人次</td>
                        <td>{{totalAbsentDiffCount(item)}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <no-data v-else :item="'出勤情况'" />
              </div>
            </div>
          </div>
          <div class="c-main c-main-second">
            <div class="c-left">
              <div class="filter-box">
                <div class="title-date">
                  <h3 class="title">
                    <em></em>园所
                    <span>晨检状况</span>条形图</h3>
                  <ul>
                    <li class="btn1 on" @click="timeSlot(7, 121)">最近7天</li>
                    <li class="btn1" @click="timeSlot(30, 121)">最近30天</li>
                    <li>
                      <date-picker @getData="getData(arguments, 121)"></date-picker>
                    </li>
                  </ul>
                </div>
              </div>
              <!-- <div class="123"> -->
              <div class="echarts-box">
                <y-bar
                  :settings="dayMCheck"
                  v-if="dayMCheck.summary !== '暂无总结'"
                ></y-bar>
                <no-data v-else :item="'晨检状况'" />
              </div>
              <el-summary :data="dayMCheck.summary"></el-summary>
            </div>
            <div class="c-right">
              <div class="filter-box">
                <div class="title-date">
                  <h3 class="title">
                    <em></em>园所
                    <span>晨检状况</span>纵向对比</h3>
                  <ul>
                    <li class="btn1 on" @click="timeSlot(90, 122)">最近3个月</li>
                  </ul>
                </div>
                <div>
                </div>
              </div>
              <div class="table-main-two">
                <div class="table" v-if="this.monthCheck.length">
                  <table>
                    <thead>
                      <tr>
                        <th>对比月份</th>
                        <th>体温异常</th>
                        <th>与上月相比</th>
                        <th>需要加餐</th>
                        <th>与上月相比</th>
                        <th>需要服药</th>
                        <th>与上月相比</th>
                        <th>需要观察</th>
                        <th>与上月相比</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="item in monthCheck" :key="item.id">
                        <td>{{newtoolTime(item)}}</td>
                        <td>{{item.warnCount}}</td>
                        <td>{{totalwarnDiffCount(item)}}</td>
                        <td>{{item.jcCount}}</td>
                        <td>{{totaljcDiffCount(item)}}</td>
                        <td>{{item.fyCount}}</td>
                        <td>{{totalfyDiffCount(item)}}</td>
                        <td>{{item.gcCount}}</td>
                        <td>{{totalgcDiffCount(item)}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <no-data v-else :item="'晨检状况'" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import ElCheckbox from '@/common/elementUi/ElCheckbox'
import DatePicker from '@/common/elementUi/EldatePicker'
import ElRadio from '@/common/elementUi/ElRadio'
import ElLine from '@/common/echarts/Line'
import MonthRange from '@/common/layerUi/MonthRange'
import BarBar from '@/common/echarts/expand/BarBar'
import { timeSlot } from '@/common/customTime/customTime'
import Radar from '@/common/echarts/Radar'
import http from '@/common/axios/http'
import api from '@/common/axios/api'
import ElSummary from '@/common/summary/Summary'
import YBar from '@/common/echarts/expand/yBar'
export default {
  name: 'HealthyContrast',
  components: {
    ElCheckbox,
    DatePicker,
    ElRadio,
    ElLine,
    MonthRange,
    BarBar,
    Radar,
    ElSummary,
    YBar
  },
  data () {
    return {
      tabs: ['出勤情况', '晨检情况'],
      num: 0,
      isOnce: true,
      dayMCheck: {
        xData: ['体温异常', '需要加餐', '需要服药', '需要观察'],
        maxVal: 10,
        data: ['0', '0', '0', '0'],
        linearGradient: ['#53e9ee', '#325fff'],
        hasLine: false,
        yName: '人数(人次)',
        grid: {
          top: '20%',
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        },
        summary: '....'
      },
      // 出勤情况
      workC: {
        time: {
          startTime: '2018-07-29',
          endTime: '2018-07-30'
        },
        data: []
      },
      // 出勤情况纵向对比
      workL: {
        time: {
          startTime: '2018-07-29',
          endTime: '2018-07-30'
        },
        data: []
      },
      // // 晨检情况横向对比
      mCheckC: {
        time: {
          startTime: '2018-07-29',
          endTime: '2018-07-30'
        },
        data: []
      },
      // 晨检情况纵向对比
      mCheckL: {
        time: {
          startTime: '2018-07-29',
          endTime: '2018-07-30'
        },
        data: []
      },
      // 出勤情况横向对比
      dayWork: {
        summary: '...',
        workDate: ['8月7日', '8月8日', '8月9日', '8月10日', '8月11日', '8月12日', '8月13日'],
        workData: [{
          value: [50, 60, 70, 48, 45, 95, 46]
        }]
      },
      // 出勤情况纵向对比
      monthWork: [{
        month: '2018-08月',
        minAttendPrc: 2,
        maxAttendPrc: 3,
        leaveCount: 5,
        leaveDiff: 2,
        absentCount: 6,
        absentDiff: 1
      }],
      // 晨检纵向对比
      monthCheck: [{
        month: "2018-08-19 16:01:14",
        warnCount: 2,
        jcCount: 3,
        fyCount: 4,
        gcCount: 5,
        warnDiff: 1,
        jcDiff: 1,
        fyDiff: 1,
        gcDiff: 1
      }]
    }
  },
  computed: {
    gardenId () { return this.$store.getters.crumbIds.garden }
  },
  mounted () {
    console.log(this.gardenId)
    // 初始化所有边框样式
    this.$common.border(window.$('.contrast'))
    this.timeSlot(7, 111)
    this.timeSlot(90, 112)
    this.timeSlot(90, 122)
    window.$('.title-date li').click(function () {
      window.$(this).closest('li').addClass('on').siblings().removeClass('on')
    })
  },
  watch: {
    // 出勤情况横向对比
    'workC.time': {
      deep: true,
      handler: function (newVal) {
        this.getWorkC(newVal)
      }
    },
    // 出勤情况纵向对比
    'workL.time': {
      deep: true,
      handler: function (newVal) {
        this.getWorkL(newVal)
      }
    },
    // 晨检概况横向对比
    'mCheckC.time': {
      deep: true,
      handler: function (newVal) {
        this.getMCheck(newVal)
      }
    },
    // 晨检概况纵向对比
    'mCheckL.time': {
      deep: true,
      handler: function (newVal) {
        this.getCheckL(newVal)
      }
    }
  },
  methods: {
    // 出勤百分比-横向
    getWorkC: async function (newVal) {
      const res = await http.get(api.getAttendRate, {
        aeDate: newVal.startTime,
        bDate: newVal.endTime,
        gardenId: this.gardenId
      })
      let d = res.data.data
      let summary = ''
      if (d.length) {
        const defaultInfos = {
          checkDate: '',
          attendCount: 0,
          totalCount: 0,
          perenct: 0
        }
        for (let i = 0, len = d.length; i < len; i++) {
          d[i] = window.$.extend({}, defaultInfos, d[i])
        }
        const $obj = {
          workDate: [],
          workData: [{
            value: []
          }]
        }
        for (let i = 0, len = d.length; i < len; i++) {
          $obj.workDate.push(d[i].checkDate)
          $obj.workData[0].value.push(parseFloat(d[i].perenct))
        }
        let handlerCheckDate = $obj.workDate.map((item) => {
          let month, day
          item.substring(5, 6) !== '0' ? month = item.substring(5, 7) : month = item.substring(6, 7)
          item.substring(8, 9) !== '0' ? day = item.substring(8, 10) : day = item.substring(9, 10)
          return month + '月' + day + '日'
        })
        $obj.workDate = handlerCheckDate
        this.dayWork = $obj
        let summarySort = []
        for (let i = 0, len = $obj.workDate.length; i < len; i++) {
          summarySort.push({
            workData: $obj.workData[0].value[i],
            workDate: $obj.workDate[i]
          })
        }
        summarySort = this.$common.compareSort(summarySort, 'workData')
        summary = `在该园内,${this.workC.time.startTime}至${this.workC.time.endTime}的对比情况如下：<br>最高出勤率：发生在${summarySort[0].workDate} 最低出勤率：发生在${summarySort[summarySort.length - 1].workDate}`
      } else {
        this.dayWork.workDate = ['暂无数据']
        this.dayWork.workData = ['0']
        summary = '暂无总结'
      }
      this.dayWork.summary = summary
      // 总结语
      // let summary = ''
      // if ($checkDate[0] !== '暂无数据') {
      //   const summarySort = this.$common.compareSort(forCheckDate, 'perenct')
      //   let summaryName = ''
      //   switch (this.areaLevel) {
      //     case '省级':
      //       summaryName = 'cityName'
      //       break
      //     case '市级':
      //       summaryName = 'districtName'
      //       break
      //     case '县级':
      //       summaryName = 'gardenName'
      //       break
      //   }
      //   summary = '在全' + this.levelByte.curr +'范围下，' + this.workC.cityList.join('、') + '在' + this.workC.time.startTime + '至' + this.workC.time.endTime + '的对比情况如下：<br>最高出勤率：发生在' + summarySort[0].checkDate.substring(0, 11) + '的' + summarySort[0][summaryName] + ' 最低出勤率：发生在' + summarySort[summarySort.length - 1].checkDate.substring(0, 11) + '的' + summarySort[summarySort.length - 1][summaryName] // eslint-disable-line
      // } else {
      //   summary = '暂无总结'
      // }
      // this.dayWork.summary = summary
    },
    // 出勤表格-纵向
    getWorkL: async function (newVal) {
      const res = await http.get(api.getAttendCompare, {
        aeMonth: newVal.startTime,
        bMonth: newVal.endTime,
        gardenId: this.gardenId
      })
      let d = res.data.data
      const defaultInfos = {
        month: '',
        minAttendPrc: 0,
        maxAttendPrc: 0,
        leaveCount: 0,
        absentCount: 0,
        leaveDiff: 0,
        absentDiff: 0
      }
      for (let i = 0, len = d.length; i < len; i++) {
        d[i] = window.$.extend({}, defaultInfos, d[i])
      }
      // const d = [
      //   {
      //     month: '2018-08-25 13:23:29',
      //     minAttendPrc: 2,
      //     maxAttendPrc: 6,
      //     leaveCount: 5,
      //     absentCount: 5,
      //     leaveDiff: 3,
      //     absentDiff: 1
      //   }, {
      //     month: '2018-05-29 13:23:29',
      //     minAttendPrc: 2,
      //     maxAttendPrc: 58,
      //     leaveCount: 8,
      //     absentCount: 5,
      //     leaveDiff: 9,
      //     absentDiff: 1
      //   }, {
      //     month: '2018-05-2 13:23:29',
      //     minAttendPrc: 2,
      //     maxAttendPrc: 58,
      //     leaveCount: 8,
      //     absentCount: 5,
      //     leaveDiff: 23,
      //     absentDiff: 1
      //   }
      // ]
      // console.log(res.data.data)

      console.log(d, '12312312312312312321213213123321')
      this.monthWork = d
      if (d.length) {
        // let d = res.data.data
        this.monthWork = d
      }
    },
    toolTime (item) {
      return item.month.substring(0, 7) + '月'
    },
    totalLeaveDiffCount (item) {
      if (item.leaveDiff > 0) {
        return `多${item.leaveDiff}人次`
      } else if (item.leaveDiff === 0) {
        return '持平'
      } else {
        let newLeavDiff = Math.abs(item.leaveDiff)
        return `少${newLeavDiff}人次`
      }
    },
    totalAbsentDiffCount (item) {
      if (item.absentDiff > 0) {
        return `多${item.absentDiff}人次`
      } else if (item.absentDiff === 0) {
        return '持平'
      } else {
        let newAsentDiff = Math.abs(item.absentDiff)
        return `少${newAsentDiff}人次`
      }
    },


    // 晨检情况横向对比
    getMCheck: async function (newVal) {
      const res = await http.get(api.getCheckRada, {
        aeCheckDay: newVal.startTime,
        bCheckDay: newVal.endTime,
        gardenId: this.gardenId
      })
      let d = res.data.data
      // console.log(d, '000000')

      let summary1 = ''
      if (!d.length) {
        this.dayMCheck.xData = ['暂无数据']
        this.dayMCheck.data = ['0']
        this.dayMCheck.summary = '暂无总结'
      } else {
        let d = res.data.data[0]
        const defaultInfos = [{
          warnCount: '0',
          jcCount: '0',
          fyCount: '0',
          gcCount: '0'
        }]
        for (let i = 0, len = d.length; i < len; i++) {
          d[i] = window.$.extend({}, defaultInfos, d[i])
        }
        console.log(d)
        let a = []
        let b = []
        let c = []
        let e = []
        a.push(d.warnCount)
        b.push(d.jcCount)
        c.push(d.fyCount)
        e.push(d.gcCount)
        let f = a.concat(b, c, e)
        console.log(f)
        summary1 = `在该园所中${newVal.startTime}至${newVal.endTime}的晨检情况如下: <br>体温异常情况的累计人数有${d.warnCount}人;
      <br>需要服药的累计人数有${d.fyCount}人; <br>需要观察的累计人数有${d.gcCount}人; <br>需要加餐的累计人数有${d.jcCount}人;`
        this.dayMCheck.xData = ['体温异常', '需要加餐', '需要服药', '需要观察']
        this.dayMCheck.data = f
        this.dayMCheck.maxVal = Math.max(...f) + 5
        this.dayMCheck.summary = summary1
      }
    },
    // 晨检表格纵向对比
    getCheckL: async function (newVal) {
      const res = await http.get(api.getCheckCompare, {
        aeMonth: newVal.startTime,
        bMonth: newVal.endTime,
        gardenId: this.gardenId
      })
      if (res.data) {
        let d = res.data.data
        const defaultInfos = {
          month: "",
          warnCount: 0,
          jcCount: 0,
          fyCount: 0,
          gcCount: 0,
          warnDiff: 0,
          jcDiff: 0,
          fyDiff: 0,
          gcDiff: 0
        }
        for (let i = 0, len = d.length; i < len; i++) {
          d[i] = window.$.extend({}, defaultInfos, d[i])
        }
        // d = [{
        //   month: "2018-08-19 16:01:14",
        //   warnCount: 1000,
        //   jcCount: 3,
        //   fyCount: 4,
        //   gcCount: 5,
        //   warnDiff: 1,
        //   jcDiff: 1,
        //   fyDiff: 1,
        //   gcDiff: 1
        // }, {
        //   month: "2018-08-19 16:01:14",
        //   warnCount: 2,
        //   jcCount: 5,
        //   fyCount: 5,
        //   gcCount: 6,
        //   warnDiff: 1,
        //   jcDiff: 1,
        //   fyDiff: 9,
        //   gcDiff: 1
        // }]
        this.monthCheck = d
        console.log(this.monthCheck)
      }
    },
    newtoolTime (item) {
      return item.month.substring(0, 7) + '月'
    },
    totalwarnDiffCount (item) {
      if (item.warnDiff > 0) {
        return `多${item.warnDiff}人次`
      } else if (item.warnDiff === 0) {
        return '持平'
      } else {
        let newwarnDiff = Math.abs(item.warnDiff)
        return `少${newwarnDiff}人次`
      }
    },
    totaljcDiffCount (item) {
      if (item.jcDiff > 0) {
        return `多${item.jcDiff}人次`
      } else if (item.jcDiff === 0) {
        return '持平'
      } else {
        let newjcDiff = Math.abs(item.jcDiff)
        return `少${newjcDiff}人次`
      }
    },
    totalfyDiffCount (item) {
      if (item.fyDiff > 0) {
        return `多${item.fyDiff}人次`
      } else if (item.fyDiff === 0) {
        return '持平'
      } else {
        let newfyDiff = Math.abs(item.fyDiff)
        return `少${newfyDiff}人次`
      }
    },
    totalgcDiffCount (item) {
      if (item.gcDiff > 0) {
        return `多${item.gcDiff}人次`
      } else if (item.gcDiff === 0) {
        return '持平'
      } else {
        let newgcDiff = Math.abs(item.gcDiff)
        return `少${newgcDiff}人次`
      }
    },
    // 对比数据标签切换
    tab (index) {
      this.num = index
      if (index === 1 && this.isOnce) {
        this.timeSlot(7, 121)
        this.isOnce = !this.isOnce
      }
    },
    // 最近一段时间
    timeSlot (d, i) {
      const res = timeSlot(d)
      switch (i) {
        case 111:
          this.workC.time.startTime = res.t1
          this.workC.time.endTime = res.t2
          break
        case 112:
          this.workL.time.startTime = res.t1
          this.workL.time.endTime = res.t2
          break
        case 121:
          this.mCheckC.time.startTime = res.t1
          this.mCheckC.time.endTime = res.t2
          break
        case 122:
          this.mCheckL.time.startTime = res.t1
          this.mCheckL.time.endTime = res.t2
          break
      }
    },
    // 开始结束时间(天)
    getData (d, i) {
      const res = d[0]
      switch (i) {
        case 111:
          this.workC.time.startTime = res.t1
          this.workC.time.endTime = res.t2
          break
        case 121:
          this.mCheckC.time.startTime = res.t1
          this.mCheckC.time.endTime = res.t2
          break
      }
    },
    // 开始结束时间(月)
    getMonthRange (d, i) {
      const res = d[0]
      switch (i) {
        case 112:
          this.workL.time.startTime = res.t1
          this.workL.time.endTime = res.t2
          break
        case 122:
          this.mCheckL.time.startTime = res.t1
          this.mCheckL.time.endTime = res.t2
          break
      }
    },
  }
}
</script>

<style  scoped>
.handle-no-data {
  display: flex;
  justify-content: center;
  margin-top: 300px;
}
.table-main-one table {
  margin-left: auto;
  margin-right: auto;
}
.table-main-one table {
  background-color: rgba(8, 19, 63, 0.5);
}
.table-main-one tr > th {
  font-size: 14px;
}
.table-main-one tbody tr:nth-child(2n + 1) {
  background-color: rgba(18, 50, 110, 0.5);
}
.table-main-one tr {
  text-align: center;
  width: 100px;
  height: 60px;
}
.table-main-one td {
  text-align: center;
  width: 100px;
  height: 60px;
}
.table-main-two {
  width: 100%;
  flex: 1;
}
.table-main-two table {
  margin-left: auto;
  margin-right: auto;
}
.table-main-two table {
  background-color: rgba(8, 19, 63, 0.5);
}
.table-main-two tr > th {
  font-size: 14px;
}
.table-main-two tbody tr:nth-child(2n + 1) {
  background-color: rgba(18, 50, 110, 0.5);
}
.table-main-two tr {
  text-align: center;
  width: 75px;
  height: 60px;
}
.table-main-two td {
  text-align: center;
  width: 75px;
  height: 60px;
}
.table table {
  width: 100%;
}
</style>
